<!--会员卡报表-->
<template>
  <div>
    <div class="header-right">
      <el-button class="export-btn  float-left" type="primary" round>{{lang._011}}</el-button>
      <!-- 导出按钮 -->
      
      <el-select v-model="value" class="float-left float-input" placeholder="请选择" style="width:148px;border-radius:14px 0 0 14px;">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="value" class="float-left float-input" placeholder="请选择" style="width:167px;">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="value" class="float-left float-input" placeholder="请选择" style="width:128px;">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker class="dataTime float-left" v-model="dataTime" type="datetimerange" :picker-options="pickerOptions2" range-separator="|"
        start-placeholder="2018-3-13 0:00:00" end-placeholder="2018-3-13 24:00:00" align="right">
      </el-date-picker>
      <el-button class="float-left search-btn" type="primary" round>{{lang._012}}</el-button>

      <!-- 时间选择 -->
    </div>
    <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
      <el-tab-pane :label="lang._256" name="first">
        <el-table class="text-center tables" :data="tableData1" stripe header-cell-style="color:#409eff">
          <el-table-column prop="uid" :label="lang._045" width="40">
          </el-table-column>
          <el-table-column prop="openCarmen" :label="lang._165" width="361">
          </el-table-column>
          <el-table-column prop="cashier" :label="lang._022" width="120">
          </el-table-column>
          <el-table-column prop="guide" :label="lang._038" width="120">
          </el-table-column>
          <el-table-column prop="prepaidMembers" :label="lang._240" width="170">
          </el-table-column>
          <el-table-column prop="program" :label="lang._241" width="170">
          </el-table-column>
          <el-table-column prop="rechargeAmount" :label="lang._242" width="170">
          </el-table-column>
          <el-table-column prop="presentedAmount" :label="lang._243" width="170">
          </el-table-column>
          <el-table-column prop="payment" :label="lang._244" width="170">
          </el-table-column>
          <el-table-column prop="rechargeTime" :label="lang._245">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 营销概况的详情标签页 -->
      <el-tab-pane :label="lang._257" name="second">
        <el-table class="text-center tables" :data="tableData2" stripe header-cell-style="color:#409eff">
          <el-table-column prop="uid" :label="lang._045" width="40">
          </el-table-column>
          <el-table-column prop="vipNumber" :label="lang._162" width="315">
          </el-table-column>
          <el-table-column prop="name" :label="lang._163" width="315">
          </el-table-column>
          <el-table-column prop="rechargeAmount" :label="lang._242" width="335">
          </el-table-column>
          <el-table-column prop="presentedAmount" :label="lang._243" width="335">
          </el-table-column>
          <el-table-column prop="monetary" :label="lang._253">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 交接班记录的详情标签页 -->
      <el-tab-pane :label="lang._258" name="third">
        <el-table class="text-center tables" :data="tableData3" stripe header-cell-style="color:#409eff">
          <el-table-column prop="uid" :label="lang._045" width="40">
          </el-table-column>
          <el-table-column prop="shop" :label="lang._259" width="279">
          </el-table-column>
          <el-table-column prop="vip" :label="lang._260" width="239">
          </el-table-column>
          <el-table-column prop="type" :label="lang._031" width="279">
          </el-table-column>
          <el-table-column prop="integralUsed" :label="lang._261" width="279">
          </el-table-column>
          <el-table-column prop="remark" :label="lang._027" width="279">
          </el-table-column>
          <el-table-column prop="timeUsed" :label="lang._262">
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- 现金收支明细的详情标签页 -->
    </el-tabs>
    <el-footer v-show="activeName2=='third'">
        记录3，总使用积分 289.00
    </el-footer>
  </div>
</template>
<style lang="less" scoped>
  .header-right {
    position: absolute;
    z-index: 2;
    right: 0;
    height: 60px;
    .export-btn {
      margin-top: 15px;
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-left: 20px;
      margin-right: 20px;
    }
    .search-btn {
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-top: 15px;
      border-radius: 0 14px 14px 0;
      margin-right: 20px;
    }
    .dataTime {
      border: 1px solid #409eff;
      color: #409eff;
      border-radius: 0;
      height: 30px;
      padding: 0;
      margin: 0;
      margin-top: 15px;
      overflow: hidden;
    }

  }

</style>
<style>
.float-input{
    margin-top: 15px;
    overflow: hidden;
        border: 1px solid #409Eff;
            border-right: none;
}
.el-select{
    height: 28px;
    line-height: 28px;
}

.el-input__inner{
    height: 30px;
    line-height: 30px;
    color: #409eff;


}
.el-input__icon{
    height: 30px;
    line-height: 30px;
}
.el-input__prefix, .el-input__suffix{
    top: 15px;
}
  .el-tabs__header {
    height: 60px;
    margin: 0;
    background: #FFF;
  }

  .el-tabs__item {
    height: 30px;
    line-height: 30px;
    margin-top: 15px;
    border: none;
    color: #409eff;
    font-size: 15px;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item {
    border-bottom: none;
    border-left: none;
    margin-left: 20px;
    margin-right: 20px;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__nav {
    border: none;
  }

  .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    color: #FFF;
    background: #409eff;
    border-radius: 14px;
  }

  .el-tabs__content {
    height: calc(100vh - 61px - 80px);
    background: unset;
  }

  .el-date-editor .el-range-input {
    float: left;
    color: #409eff;
    width: calc(50% - 15px);
  }

  .el-date-editor .el-range-separator {
    float: left;
    color: #409eff;
  }

  .el-date-editor .el-range__icon {
    display: none;
  }

  .el-table th {
    text-align: center !important;
  }

  .el-table th,
  .el-table tr {
    background-color: unset;
  }

  .el-table tr {
    background: #edf5ff;
  }

  .el-table__row {
    background: unset !important;
  }
  .el-table{
      /* margin: 20px; */
      width: calc(100% - 40px);
  }
  .el-select .el-input__inner{
      border-radius: 0;
  }
  .el-select .el-input__inner:first{
      border-radius: 14px !important;
  }
  .el-table .cell, .el-table th div{
      padding-left: 0;
      padding-right: 0;
  }
  .el-footer{
      height: 60px;
      width: 100%;
      background: #FFF;
      position: fixed;
      bottom: 0;
      font-size: 18px;
      color: #323644;
      text-align: left;
      line-height: 60px;
      font-family: '微软雅黑';
  }
</style>


<script>
  export default {
    props: ['lang'],
    data() {
      return {
        activeName2: 'first',
        //初始的选择标签页
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        dataTime: '',
        //时间选择器
        tableData1: [{
            uid: '1',
            openCarmen: 'Tast Of Blue',
            cashier: '苗苗',
            guide: '林昌',
            prepaidMembers: 'admin',
            program: '次卡',
            rechargeAmount: '299.00',
            presentedAmount: '17.00',
            payment: '现金',
            rechargeTime: '2017-12-31 12:00:00'
        },{
            uid: '1',
            openCarmen: 'Tast Of Blue',
            cashier: '苗苗',
            guide: '林昌',
            prepaidMembers: 'admin',
            program: '次卡',
            rechargeAmount: '299.00',
            presentedAmount: '17.00',
            payment: '现金',
            rechargeTime: '2017-12-31 12:00:00'
        },{
            uid: '1',
            openCarmen: 'Tast Of Blue',
            cashier: '苗苗',
            guide: '林昌',
            prepaidMembers: 'admin',
            program: '次卡',
            rechargeAmount: '299.00',
            presentedAmount: '17.00',
            payment: '现金',
            rechargeTime: '2017-12-31 12:00:00'
        },{
            uid: '1',
            openCarmen: 'Tast Of Blue',
            cashier: '苗苗',
            guide: '林昌',
            prepaidMembers: 'admin',
            program: '次卡',
            rechargeAmount: '299.00',
            presentedAmount: '17.00',
            payment: '现金',
            rechargeTime: '2017-12-31 12:00:00'
        },],
        //营业概况的表格数据
        tableData2: [{
            uid: '1',
            vipNumber: '1024204830724096',
            name: '风鸿影',
            rechargeAmount: '200.00',
            presentedAmount: '17.00',
            monetary: '233.59'
        },{
            uid: '1',
            vipNumber: '1024204830724096',
            name: '风鸿影',
            rechargeAmount: '200.00',
            presentedAmount: '17.00',
            monetary: '233.59'
        },{
            uid: '1',
            vipNumber: '1024204830724096',
            name: '风鸿影',
            rechargeAmount: '200.00',
            presentedAmount: '17.00',
            monetary: '233.59'
        },{
            uid: '1',
            vipNumber: '1024204830724096',
            name: '风鸿影',
            rechargeAmount: '200.00',
            presentedAmount: '17.00',
            monetary: '233.59'
        },],
        //交接班的表格数据
        tableData3: [{
            uid: '1',
            shop: 'Tast Of Blue',
            vip: 'admin',
            type: '兑换礼品',
            integralUsed: '2000.00',
            remark: '礼品123*1',
            timeUsed: '2017-12-31 12:00:00'
        },
        {
            uid: '1',
            shop: 'Tast Of Blue',
            vip: 'admin',
            type: '兑换礼品',
            integralUsed: '2000.00',
            remark: '礼品123*1',
            timeUsed: '2017-12-31 12:00:00'
        },{
            uid: '1',
            shop: 'Tast Of Blue',
            vip: 'admin',
            type: '兑换礼品',
            integralUsed: '2000.00',
            remark: '礼品123*1',
            timeUsed: '2017-12-31 12:00:00'
        },{
            uid: '1',
            shop: 'Tast Of Blue',
            vip: 'admin',
            type: '兑换礼品',
            integralUsed: '2000.00',
            remark: '礼品123*1',
            timeUsed: '2017-12-31 12:00:00'
        },]
        //现金收支明细的表格数据
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  }

</script>
